<template>
    <div>
        <aside class="kefu">
            <el-popover placement="left" trigger="hover">
                <img style="width:150px;" src="@/assets/kefu.png" />
                <div slot="reference" class="kefu_item">
                    <div class="kefu_icon el-icon-service"></div>
                    <div>在线客服</div>
                </div>
            </el-popover>
            <el-popover placement="left" trigger="hover">
                18796357645
                <div slot="reference" class="kefu_item" style="border:none;">
                    <div class="kefu_icon el-icon-phone-outline"></div>
                    <div>销售热线</div>
                </div>
            </el-popover>
            <!-- <div class="kefu_item" style="border:none;" @click="show=true">
                <div class="kefu_icon el-icon-edit-outline"></div>
                <div>需求反馈</div>
            </div> -->
        </aside>
        <el-dialog
            title="需求反馈"
            :visible.sync="show"
            width="600px">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="需求概述" required>
                    <el-input type="textarea" v-model="form.desc" placeholder="请填写您的需求反馈"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" required>
                    <el-input v-model="form.phone" type="number" maxlength="11" placeholder="请填写您的联系方式"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="show = false">取 消</el-button>
                <el-button type="primary" @click="show = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                show: false,
                form: {

                }
            }
        },
        methods: {

        }
    }
</script>

<style scoped lang="scss">
    .kefu {
        position: fixed;
        right: 10px;
        font-size: 10px;
        background: fff;
        color: #5f5e5e;
        background: #fff;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 6px -4px, rgba(134, 134, 134, 0.37) 0px 6px 16px;
        width: 54px;
        padding: 10px 0;
        border-radius: 27px;
        cursor: pointer;
        z-index: 99999;
        bottom: 20px;
        text-align: center;

        .kefu_item {
            border-bottom: 1px solid #edebeb;
            padding: 10px 0;
            line-height: 18px;
        }

        .kefu_item:hover {
            color: rgb(22, 132, 252);
        }

        .kefu_icon {
            font-size: 18px;
        }
    }
</style>
